import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { HashRouter as Router, Route, Redirect, Switch} from 'react-router-dom'
import { asyncComponent } from 'react-async-component';
import { Tools } from 'weaver-mobile';
import { FloatingTouch } from 'weaver-mobile-page';

import allStore from './stores';
import './style';

const getLocaleLabel = Tools.getLocaleLabel.bind(this, 'cowork_mobile');

const coms = {
  Main: asyncComponent({ // 主页
    resolve: () => import('./components/main')
  }),
  Communication: asyncComponent({ // 协作交流
    resolve: () => import('./components/communication')
  }),
  Approval: asyncComponent({  // 协作审批
    resolve: () => import('./components/approval')
  }),
  Apply: asyncComponent({ // 协作申请
    resolve: () => import('./components/apply')
  }),
  Center: asyncComponent({ //个人中心
    resolve: () => import('./components/center')
  }),
  Detail: asyncComponent({ // 协作详情
    resolve: () => import('./components/communication/detail')
  }),
  HrmJoin: asyncComponent({
    resolve: () => import('./components/hrmJoin')
  })
}

class Root extends React.Component {
  
  onHomePageClick() {
    window.location.href = '/#/';
  }
	
  render() {
		return (
      <Provider {...allStore}>
        <Router>
          <FloatingTouch onClick={() => this.onHomePageClick()}>
            <Route name='home' path='/' onEnter={getLocaleLabel} render={() => {
                return (
                  <coms.Main>
                    <Switch>
                      <Route name='communication' breadcrumbName='协作交流' path='/communication' component={coms.Communication} />
                      <Route name='approval' breadcrumbName='协作审批' path='/approval' component={coms.Approval}/>
                      <Route name='apply' breadcrumbName='协作申请' path='/apply' component={coms.Apply}/>
                      <Route name='center' breadcrumbName='个人中心' path='/center' component={coms.Center} />
                      <Route name='detail' breadcrumbName='协作详情页面' path='/detail' component={coms.Detail}/>
                      <Route name='hrmjion' breadcrumbName='其他参与人参与的协作' path='/hrmjion' component={coms.HrmJoin}/>
                      <Redirect exact path="/" to={{pathname: '/communication'}} />
                    </Switch>
                  </coms.Main>
                );
            }}/>
          </FloatingTouch>
        </Router>
      </Provider>
    );
  }
}

Tools.getLocaleLabel('cowork_mobile', () => {
  render(<Root />, document.getElementById('root'));
});